<template>
  <div>
    <el-form :inline="true" :model="param">
      <el-form-item label="店铺名称">
        <el-input v-model="param.shop_name" placeholder="店铺名称" maxlength="15" clearable></el-input>
      </el-form-item>
      <el-form-item label="法人手机号">
        <el-input v-model="param.lr_mobile" type="number" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="法人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" row-key="Id" border style="width: 100%; " v-loading="tableLoading">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(param.page - 1) * param.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shop_name" align="center" label="店铺名称">
      </el-table-column>
      <el-table-column prop="shop_name" align="center" label="店铺所在区域">
        <template slot-scope="scope">
          <div>
            {{ scope.row.province_name }}{{ scope.row.city_name}}{{ scope.row.area_name }}{{ scope.row.street_name}}{{ scope.row.community_name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" align="center" label="店铺地址">
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="售后电话">
      </el-table-column>
      <el-table-column prop="legal_representative" align="center" label="法人">
      </el-table-column>
      <el-table-column prop="lr_mobile" align="center" label="法人手机号">
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="入驻时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goGoodsList(scope.row)">查看商品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="param.page" :page-sizes="[10, 20, 50, 100]" :page-size="param.limit" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      param: {
        page: 1,
        limit: 10,
      },
      total: 0,
      dataList: [],
      tableLoading: false
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    // 每页数
    sizeChangeHandle (val) {
      this.param.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.param.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.param.page = 1
      this.getList()
    },
    // 跳转商品列表
    goGoodsList (row) {
      this.$router.push({
        name: 'onlineMerchant-goodsList',
        params: {
          shopId: row.id,
          shopName: row.shop_name
        }
      })
    },
    getList () {
      this.tableLoading = true;
      seviceApi.getShopList(this.param).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
        this.tableLoading = false;
      })
    },
    // 重置
    reset () {
      this.param = {
        page: 1,
        limit: 10,
        load_other: true,
      }
      this.$forceUpdate()
      this.getList()
    }
  }
}
</script>
<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style lang="scss" scoped>
</style>
